<template>
    <div>
        <el-descriptions class="margin-top" title="用户信息" :column="3" border>
            <template slot="extra">
                <el-button type="primary" @click="open()">编辑</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                </template>
                {{userInfo.username}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    邮箱号
                </template>
                {{userInfo.email}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    居住地
                </template>
                {{userInfo.userInfo.city}}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    角色
                </template>
                <el-tag size="small" v-for="item in userInfo.roleList">
                    {{item.roleName}}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    联系地址
                </template>
                {{userInfo.userInfo.home}}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
                <template slot="label">
                    <i class="el-icon-box"></i>
                    生日
                </template>
                {{userInfo.userInfo.birthday}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-place"></i>
                    创建时间
                </template>
                {{$moment(userInfo.createTime).format('YYYY-MM-DD HH:mm:ss')}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-edit-outline"></i>
                    更新时间
                </template>
                {{$moment(userInfo.updateTime).format('YYYY-MM-DD HH:mm:ss')}}
            </el-descriptions-item>
        </el-descriptions>

        <el-dialog title="编辑" :visible.sync="editDialogForm" :append-to-body="true" :close-on-click-modal="false"
            width="500px">
            <el-form :model="editForm" ref="edifForm">
                <el-form-item label="居住地" :label-width="formLabelWidth">
                    <el-input v-model="editForm.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系地址" :label-width="formLabelWidth">
                    <el-input v-model="editForm.home" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生日" :label-width="formLabelWidth">
                    <el-date-picker v-model="editForm.birthday" type="date" placeholder="选择日期" style="width: 100%"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogForm = false">取 消</el-button>
                <el-button type="primary" @click="updateInfo()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                username: '',
                email: '',
                createTime: '',
                updateTime: '',
                userInfo: {
                    city: '',
                    home: '',
                    birthday: ''
                },
                roleList: {
                    id: '',
                    roleName: ''
                }
            },
            editForm: {
                id: '',
                city: '',
                home: '',
                birthday: ''
            },
            editDialogForm: false,
            formLabelWidth: '80px'
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.$axios.get('personal/info').then(res => {
                this.userInfo = res.data.data
                this.editForm = res.data.data.userInfo
            })
        },
        open() {
            this.$axios.get('personal/getFormInfo/' + this.userInfo.userInfo.id).then(res => {
                this.editForm = res.data.data
                this.editDialogForm = true    
            })
        },
        updateInfo(formName) {
            this.$axios.post('personal/updateInfo', this.editForm).then(res => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.editDialogForm = false
                    this.getUserInfo()
                } else {
                    this.$message.error(res.data.message)
                }
            })
        }
    }
}
</script>

<style>
.el-descriptions__header {
    height: 30px;
}
</style>